<template>
    <el-dialog :visible.sync="dialogVisible" title="司机管理" :close-on-press-escape="false" :close-on-click-modal="false">
        <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">

            <el-row>
                <el-col :span="12">
                    <el-form-item label="司机编号" prop="driverNo">
                        <el-input v-model="formData.driverNo" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="司机姓名" prop="driverName">
                        <el-input v-model="formData.driverName" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="司机手机号" prop="driverPhone">
                        <el-input v-model="formData.driverPhone" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="身份证号" prop="idCardNumber">
                        <el-input v-model="formData.idCardNumber" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="身份证地址" prop="idCardAddress">
                        <el-input v-model="formData.idCardAddress" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="驾驶证" prop="drivingLicense">
                        <UploadImage :value="formData.drivingLicense" @refresh="setDrivingLicense"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="UID" prop="uid">
                        <el-input v-model="formData.uid" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item label="车辆" prop="vehicleId">
                        <el-select v-model="formData.vehicleId" clearable filterable placeholder="请选择"  style="width:100%;">
                            <el-option
                                v-for="item in vehicleOptions"
                                :key="item.id"
                                :label="item.licensePlateNumber"
                                :value="item.id"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="角色" prop="roleId">
                        <el-select v-model="formData.roleId" filterable clearable placeholder="请选择" style="width:100%;">
                            <el-option
                                v-for="item in Dict.enums.driverRole"
                                :key="item.code"
                                :label="item.name"
                                :value="item.code"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="线路组" prop="lineGroupIds">
                        <el-select v-model="formData.lineGroupIds" multiple clearable filterable placeholder="请选择"  style="width:100%;">
                            <el-option
                                v-for="item in lineGroupOptions"
                                :key="item.id"
                                :label="item.lineGroupName"
                                :value="item.id"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="分流站点" prop="flowStationId">
                        <el-select v-model="formData.flowStationId" clearable filterable placeholder="请选择"  style="width:100%;">
                            <el-option
                                v-for="item in stationOptions"
                                :key="item.id"
                                :label="item.stationName"
                                :value="item.id"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="网约车证" prop="networkCarLicense">
                        <UploadImage :value="formData.networkCarLicense" @refresh="setNetworkCarLicense"/>
                    </el-form-item>
                </el-col>
            </el-row>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false" style="margin-right: 20px;">取 消</el-button>
            <el-popconfirm title="确定保存吗？" @onConfirm="submitForm()">
                <el-button slot="reference" type="primary">保存</el-button>
            </el-popconfirm>
        </div>
    </el-dialog>
</template>

<script>
    import { DriverApi } from '@/api/user/DriverApi'
    import {LineGroupApi} from '@/api/intercity/LineGroupApi'
    import {StationApi} from '@/api/intercity/StationApi'
    import {VehicleApi} from '@/api/user/VehicleApi'
    import UploadImage from '@/components/UploadImage'

    export default {
        name: 'IntercityDriverUpdate',
        components: {UploadImage},
        data() {
            return {
                formData: {
                    id: '',
                    uid: '',
                    driverNo: '',
                    driverName: '',
                    driverPhone: '',
                    idCardNumber: '',
                    idCardAddress: '',
                    roleId: '',
                    lineGroupIds: '',
                    flowStationId: '',
                    vehicleId:'',
                    drivingLicense:[],
                    networkCarLicense:[]
                },
                rules: {
                    uid: [{required: true,message: '请输入UID',trigger: 'blur'}],
                    driverNo: [{required: true, message: '请输入司机编号',trigger: 'blur' }],
                    driverName: [
                        {required: true,message: '请输入司机姓名',trigger: 'blur'},
                        {min: 1, max: 30,message: '长度在 2 到 30 个字符',trigger: 'blur'}
                    ],
                    driverPhone: [
                        {required: true,message: '请输入司机手机号',trigger: 'blur'},
                        {min: 11,max: 11,message: '手机号为11个数字',trigger: 'blur'}
                    ],
                    idCardNumber: [
                        {required: true,message: '请输入身份证号',trigger: 'blur'},
                        {min: 18,max: 18,message: '身份证号为 18 个字符',trigger: 'blur'}
                    ],
                    idCardAddress: [
                        {required: true,message: '请输入身份证地址',trigger: 'blur'},
                        {min: 1,max: 100,message: '长度在 1 到 100 个字符',trigger: 'blur'}
                    ]
                },
                dialogVisible: false,
                lineGroupOptions:[],
                stationOptions:[],
                vehicleOptions:[]
            }
        },
        created() {
            this.getLineGroupOptions()
            this.getStationOptions()
            this.getVehicleOptions()
        },
        methods: {
            // 显示组件
            async showUpdate(id) {
                const that = this

                that.dialogVisible = true
                if (that.$refs['formRef'] !== undefined) {
                    that.$refs['formRef'].resetFields()
                    that.formData.id = ''
                }


                that.$nextTick(() => {
                    if (id > 0) {
                        DriverApi.load(id).then((response) => {
                            that.formData = Object.assign({}, response)
                        })
                    }
                })
            },

            // 获取总线路组
            getLineGroupOptions() {
                LineGroupApi.getList().then((response) => {
                    this.lineGroupOptions = response
                })
            },

            // 获取站点
            getStationOptions() {
                StationApi.getList().then((response) => {
                    this.stationOptions = response
                })
            },

            // 获取车辆
            getVehicleOptions() {
                VehicleApi.getList({}).then((response) => {
                    this.vehicleOptions = response
                })
            },

            // 提交表单
            submitForm() {
                const that = this
                that.$refs['formRef'].validate((valid) => {
                    if (!valid) return false

                    if (that.formData.id) {
                        DriverApi.edit(that.formData).then(() => {
                            that.dialogVisible = false
                            that.$emit('refresh')
                        })
                    } else {
                        DriverApi.create(that.formData).then(() => {
                            that.dialogVisible = false
                            that.$emit('refresh')
                        })
                    }
                })
            },

            setDrivingLicense(e){
                this.form.drivingLicense = e
            },

            setNetworkCarLicense(e){
                this.form.networkCarLicense = e
            }
        }
    }
</script>
